<template>
  <a-modal
    title="修改"
    :maskClosable="false"
    :width="1050"
    placement="right"
    :closable="true"
    :footer="null"
    @cancel="onClose"
    :visible="managerInfoEditVisiable"
  >
   <a-form :form="form">
      <a-row>
        <a-col :md="12" :sm="24"
          ><a-form-item label="拓展经理角色" v-bind="formItemLayout">
            <a-select :disabled="true" v-decorator="[
                'agentName',
                { rules: [{ required: true, message: '不能为空' }] },
              ]">
              <a-select-option value="40">40-拓展经理</a-select-option>
              <a-select-option value="41">41-拓展经理审核员</a-select-option>
            </a-select>
              </a-form-item>
              </a-col>
        <a-col :md="12" :sm="24"
          ><a-form-item label="手机号" v-bind="formItemLayout">
            <a-input
             :disabled="true"
              v-decorator="[
                'managerPhone',
                { rules: [{ required: true, message: '不能为空' }] },
              ]"
            /> </a-form-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="姓名" v-bind="formItemLayout">
            <a-input
             :disabled="true"
              v-decorator="[
                'managerName',
                { rules: [{ required: true, message: '不能为空' }] },
              ]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="员工号" v-bind="formItemLayout">
            <a-input :disabled="true"
              v-decorator="['managerId']"
            /> </a-form-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24"
          ><a-form-item label="地区代码－省" v-bind="formItemLayout">
            <a-select :disabled="true" v-decorator="['province']" @change="handleChange">
              <a-select-option value="00"> 营业执照 </a-select-option>
            </a-select>
          </a-form-item></a-col
        >
        <a-col :md="12" :sm="24"
          ><a-form-item label="地区代码－市" v-bind="formItemLayout">
            <a-select :disabled="true" v-decorator="['city']" @change="handleChange">
              <a-select-option value="00"> 营业执照 </a-select-option>
            </a-select>
            </a-form-item></a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="地区代码－区" v-bind="formItemLayout">
            <a-select :disabled="true" v-decorator="['area']" @change="handleChange">
              <a-select-option value="00"> 营业执照 </a-select-option>
            </a-select>
            </a-form-item>
            </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="收单机构类型" v-bind="formItemLayout">
            <a-select :disabled="true" v-decorator="['artifCertType']" @change="handleChange">
                  <a-select-option value="BANK"> 银行 </a-select-option>
              <a-select-option value="AGENT"> 代理商 </a-select-option>
            </a-select>
          </a-form-item>
          </a-col>
      </a-row>
      <!-- 根据收单机构类型 动态变化-->
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="收单机构" v-bind="formItemLayout">
            <a-input :disabled="true" v-decorator="['signInstIdOrg']" /> </a-form-item
        ></a-col>
        <a-col :md="12" :sm="24"
          ><a-form-item label="收单机构" v-bind="formItemLayout">
            <a-input :disabled="true" v-decorator="['signInstIdAgent']" /> </a-form-item
        ></a-col>
      </a-row>
    </a-form>
    <div class="drawer-bootom-button">
     <a-button style="margin-right: 0.8rem" @click="onClose">取消</a-button>
      <a-button @click="handleSubmit" type="primary" :loading="loading"
        >保存</a-button
      >
    </div>
  </a-modal>
</template>
<script>
import { mapState, mapMutations } from "vuex";

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 8 },
};
const supportAcctTypeList = [];
export default {
  name: "ManagerInfoEdit",
  props: {
    managerInfoEditVisiable: {
      default: false,
    },
  },
  data() {
    return {
      formItemLayout,
      form: this.$form.createForm(this),
      roleData: [],
      userId: "",
      loading: false,
      supportAcctTypeList,
    };
  },
  computed: {
    ...mapState({
      currentUser: (state) => state.account.user,
    }),
  },
  methods: {
    ...mapMutations({
      setUser: "account/setUser",
    }),
    onClose() {
      this.loading = false;
      this.form.resetFields();
      this.$emit("close");
    },
    setFormValues({ ...list }) {
      let fields = [
        "roleType",
        "managerPhone",
        "managerName",
        "managerId",
        "province",
        "city",
        "area",
        "signInstType",
        "signInstIdOrg",
        "signInstIdAgent",
      ];
      Object.keys(list).forEach((key) => {
        if (fields.indexOf(key) !== -1) {
          this.form.getFieldDecorator(key);
          let obj = {};
          obj[key] = list[key];
          this.form.setFieldsValue(obj);
        }
      });
    },

    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true;
          let user = this.form.getFieldsValue();
          user.roleId = user.roleId.join(",");
          user.userId = this.userId;
          user.deptId = this.userDept;
          this.$put("user", {
            ...user,
          })
            .then((r) => {
              this.loading = false;
              this.$emit("success");
              // 如果修改用户就是当前登录用户的话，更新其state
              if (user.username === this.currentUser.username) {
                this.$get(`user/${user.username}`).then((r) => {
                  this.setUser(r.data);
                });
              }
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
  },
  watch: {},
};
</script>
